<template>
  <div class="wrapper">
    <div class="top">
      <div class="tip1">金币</div>
      <div class="coin">
        <span class="text">{{data.miCoinAmount}}</span>
        <span class="red" @click="jump('coinRecharge')">充值</span>
      </div>
    </div>
    <div class="list">
      <div class="flex1 gray-font item">
          <div>
            <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_yajin.png" class="iconImg">
            <text class="title" v-if="data.depositStatus == 1">免押金卡</text>
            <text class="title" v-else>押金{{data.depositAmount}}元</text>
          </div>
        <span class="gray" @click="jumpDeposit">
            <text v-if="data.depositStatus == 1">免押骑行</text>
            <text v-else>{{data.rechargeButtonText}}</text>
            <img style="margin-left: 20rpx" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou.png" class="youjt"/>
          </span>
      </div>
      <div class="flex1 gray-font item" @click="jump('ensureDeposit')" v-if="data.guaranteeStatus != 0">
        <div>
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_bzj.png" class="iconImg">
          <text class="title">保证金</text>
        </div>
        <div class="gray">
          <img style="margin-left: 20rpx" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou.png" class="youjt"/>
        </div>
      </div>
    </div>
    <div class="coin-box" @click="toView">
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_wh.png">
      <span>金币充值说明</span>
    </div>
    <div class="dialog" v-if="showDialog">
      <div class="dialog_main" style="padding-top: 60rpx;height: 448rpx">
        <p class="dialog_img"><img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/mianyaka.png"></p>
        <p class="tips" style="padding: 20rpx 0 50rpx">免押金卡生效中，已免押金</p>
        <div class="dialog_footer foot">
          <button style="width: 590rpx" class="leftbtn" @click="showDialog = false">好的</button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {
    data() {
      return {
        data: "",
        changDeposit: '',
        showDialog: false
      }
    },
    onLoad() {
    },
    onShow() {
      this.getWallet()
    },
    methods: {
      jump(page) {
        if (page == 'ensureDeposit') {
          wx.navigateTo({
            url: `../${page}/main?guaranteeAmount=${this.data.guaranteeAmount}&guaranteeStatus=${this.data.guaranteeStatus}&withdrawApplicationId=${this.data.withdrawApplicationId}`
          })
        } else {
          wx.navigateTo({
            url: `../${page}/main`
          })
        }

      },
      toView() {
        wx.navigateTo({
          url: `../webView/main?url=https://api.beidouxintong.com/kaolaxxc/jinbi.htm`
        })
      },
      jumpDeposit() {
        if (this.data.depositStatusRM == 1 && this.data.unDepoistCardStatusRM == 1) {
          this.showDialog = true
          return
        }
        let rechargeCode = this.data.rechargeCode
        if (rechargeCode == 1) {
          wx.navigateTo({
            url: `../deposit/main?rechargeDepositAmount=${this.data.rechargeDepositAmount}&changDeposit=${this.changDeposit}`
          })
        }
        if (rechargeCode == 2) {
          wx.navigateTo({
            url: `../returnCash/main?depositAmount=${this.data.depositAmount}&changDeposit=${this.changDeposit}&descrptionRM=${this.data.descrptionRM}&refundAlertText=${this.data.refundAlertText}&unDepoistCardStatusRM=${this.data.unDepoistCardStatusRM}`
          })
        }
        if (rechargeCode == 3) {
//          wx.navigateTo({
//            url: `../myWallet/main`,
//          })
        }

      },
      getWallet() {
        Service.getwallet().then((res) => {
          if (res.code == 200) {
            this.data = res.data
          }
        })
      }
    }
  }
</script>

<style scoped>
  .top{
    padding: 50px 50px 37px 50px;
    border-bottom: 10px solid #F6F6F6;
  }
  .list{
    padding: 15px 50px;
  }
  .list .item{
    line-height: 120px;
  }
  .iconImg{
    position: relative;
    top: -2px;
    display: inline-block;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    margin-right: 30px;
  }

  .coin-box {
    position: fixed;
    left:0;
    right: 0;
    bottom:0;
    height:110px;
    line-height: 90px;
    background:rgba(255,255,255,1);
    text-align: center;
  }
  .coin-box img {
    position: relative;
    top: -2px;
    display: inline-block;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    margin-right: 30px;
  }
  .coin-box span {
    text-decoration:underline;
  }
  .title{
    font-size: 30px;
    color: #333;
  }
  .flex1 {
    justify-content: space-between;
    font-size: 26px;
    font-family: PingFangSC-Regular;
    color: rgba(102, 102, 102, 1);

  }

  .flex1 text {
    line-height: 37px;
  }

  .gray-font {
    color: #333;
  }

  .gray {
    color: #999;
  }


  .renz img {
    width: 180px;
    height: 60px;
  }


  .tip1 {
    font-size: 30px;
    font-family: PingFangHK-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 30px;
  }
  .tip1 img{
    margin-left: 20px;
    width: 30px;
    height: 30px;
    vertical-align: top;
  }
  .coin {
    padding-top: 30px;
    display: flex;
    justify-content:space-between;
    font-size: 54px;
    text-align: left;
    color: #333;
    font-weight: 500;
    line-height: 60px;
  }
  .coin .red{
    display: inline-block;
    width:172px;
    height:60px;
    background:rgba(254,209,48,1);
    border-radius:30px;
    font-size:30px;
    font-weight:400;
    color:rgba(51,51,51,1);
    text-align: center;
  }
  .youjt {
    width: 13px;
    height: 23px;
  }

  .line {
    background: #EEEEEE;
  }
  .dialog_img {
    text-align: center;
  }
  .dialog_img img{
    width: 120px;
    height: 120px;
  }
</style>
